import type { DirectiveBinding } from "vue";
import { filterNum } from "./auth"

// 点击当前区域外的事件
const clickOutSide = {
  mounted(el: HTMLElement, binding: DirectiveBinding){
    function clickNode(e:any){
      if(el.contains(e.target)){
        return false
      }
      if(binding.value){
        binding.value(e)
      }
    }
    (el as any)._vueClickOutSide_ = clickNode;
    document.addEventListener('click', clickNode );
  },
  unmounted(el: HTMLElement){
    document.removeEventListener('click', (el as any)._vueClickOutSide_);
    delete (el as any)._vueClickOutSide_
  }
}

// 控制任意数字的输入
let timer:any;
const toFixedNum = {
  updated(el:HTMLElement, binding: DirectiveBinding) {
    let ele:any = el.children[0];
    let val = ele.value;
    clearTimeout(timer);
    if( val != ''){
      let str = val.substr(val.length -1 , val.length);
      if(val.length > 1 && str == '.' && val.split('.').length < 3){
        timer = setTimeout(()=>{
          ele.value = filterNum(val, binding.arg ? Number(binding.arg) : 2);
          ele.dispatchEvent(new Event("input"));
        },1000)
      }else{
        ele.value = filterNum(val, binding.arg ? Number(binding.arg) : 2);
        ele.dispatchEvent(new Event("input"));
      }
    }
  },
  unmounted(el: HTMLElement){
    clearTimeout(timer);
  }
}

// 拖拽弹窗el-dialog的指令
let elementType:any = {};
const dragFunction = (element:any, key: string , e: any)=>{
  let domDrag = element.getElementsByClassName('el-dialog__header')[0];
  domDrag.style.cursor = 'move' // 改变光标形状
  const elDialog = element.getElementsByClassName('el-dialog')[0];
  const initClientX = e.clientX;
  const initClientY = e.clientY;
  const initStyleLeft = elDialog.style.left ? elDialog.style.left.replace('px','') - 0 : 0;
  const initStyleTop = elDialog.style.top ? elDialog.style.top.replace('px','') - 0 : 0;

  document.onmousemove = function(e:any){
    if(elementType[key]){ return }
    const moveX = e.clientX - initClientX + initStyleLeft;
    const moveY = e.clientY - initClientY + initStyleTop;
    elDialog.style.left = moveX + "px";
    elDialog.style.top = moveY + "px";
  }

  document.onmouseup = function(e){
    document.onmousemove = null;
    document.onmouseup = null;
    domDrag.style.cursor = ''
  };
  // 不加return false的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
  return false;
}
const dragDialog = {
  mounted(el:any, binding: DirectiveBinding) {
    // 鼠标按下，开始拖拽
    // element = el;
    if(binding.arg){ elementType[binding.arg] = false; };
    el.getElementsByClassName('el-dialog__header')[0].addEventListener('mousedown', dragFunction.bind(this,el, binding.arg) , false)
  },
  updated(el:any, binding: DirectiveBinding) {
    if(!binding.value){
      if(binding.arg){ elementType[binding.arg] = false; };
      let domDrag = el.getElementsByClassName('el-dialog__header')[0];
      domDrag.addEventListener('mousedown', dragFunction.bind(this,el, binding.arg) , false)
      // 实现每次打开 Dialog 都复位到中央
      // Dialog 的关闭动画用时 300 毫秒，因此这里需要延迟执行，而且要多延迟一点点
      setTimeout(() => {
        el.getElementsByClassName('el-dialog')[0].style.top = '0px';
        el.getElementsByClassName('el-dialog')[0].style.left = '0px';
      }, 333); 
    }else{
      if(binding.arg){ elementType[binding.arg] = true;};
      el.getElementsByClassName('el-dialog')[0].style.top = '0px';
      el.getElementsByClassName('el-dialog')[0].style.left = '0px';
    }
  },
  unmounted(){
    let typeArr = Object.keys(elementType);
    delete elementType[typeArr[typeArr.length - 1]];
    console.log(elementType)
  }
}

export default {
  install(app:any){
    app.directive('clickOutSide', clickOutSide);
    app.directive('toFixedNum', toFixedNum);
    app.directive('dragDialog', dragDialog)
  }
}